<template>
	<view>
		<u-popup :show="message.spFenLeiShow" :round="10" @close="closed">
			<view class="mainpadding flexcenter">商品分类</view>
			<view class="flexleft">
				<scroll-view scroll-y="true" class="leftscroll">
					<view :class="item.ischeck?'itemfocus':'itemnofocus'" v-for="(item,index) in fllist" :key="item.id"
						@click="changestatus(item,index)">
						<view :class="item.ischeck?'lablefocus':'lablenofocus'">{{item.name}}</view>
					</view>
				</scroll-view>
				<scroll-view scroll-y="true" class="rightscroll mainpadding">
					<view v-for="item in rightlist" :key="item.id">
						<view class="titletext">{{item.name}}</view>
						<view class="flexleft flex_wrap">
							<view
								:class="ite.ischeck?'focusbgc margin_top itemlable margin_right':'nofocusbgc margin_top itemlable margin_right'"
								v-for="ite in item.childlist" :key="ite.id" @click="changesmallStatus(ite,item.id)">
								{{ite.name}}
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
			<view class="mainpadding" @click="submit">
				<view class="surebtns flexcenter margin_top">确定</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		name:"selectSPFenLei",
		props:{
			message:{}
		},
		data() {
			return {
				fllist: [],
				rightlist: [],
				selectCateId:"",
				selectCateText:"",
			};
		},
		created() {
			this.getflList()
		},
		methods:{
			// 获取商品分类
			getflList() {
				httpRequest.request('/dhtapi/goods/goodsCategory', 'GET', {}, false, false, true).then(res => {
					if (res.code == 1) {
						res.data.forEach(item => {
							this.$set(item, "ischeck", false)
							item.childlist.forEach(ite => {
								ite.childlist.forEach(it => {
									this.$set(it, "ischeck", false)
								})
							})
						})
						res.data[0].ischeck = true
						this.fllist = res.data
						this.rightlist = res.data[0].childlist
					}
				})
			},
			changestatus(data, index) {
				this.selectIndex = index
				this.fllist.forEach(item => {
					if (item.id == data.id) {
						item.ischeck = true
						this.rightlist = item.childlist
					} else {
						item.ischeck = false
					}
				})
			},
			changesmallStatus(data, id) {
				this.fllist.forEach(items => {
					items.childlist.forEach(item => {
						item.childlist.forEach(ite => {
							ite.ischeck = false
						})
					})
				})
				data.ischeck = true
				this.selectCateId = id
				this.selectCateText = data.name
			},
			closed(){
				this.$parent.spFenLeiShow = false
			},
			submit(){
				if(this.selectCateId==""){
					httpRequest.toast("请选择分类")
					return false
				}
				let e = {
					category_id:this.selectCateId,
					spFenLeiText:this.selectCateText
				}
				this.$emit("spFenLeiSure",e)
			},
		}
	}
</script>

<style>
	.leftscroll {
		height: 500rpx;
		width: 200rpx;
	}

	.itemfocus {
		background-color: #fafafa;
		padding: 25rpx 0 25rpx 20rpx;
	}

	.lablefocus {
		font-size: 30rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #00b855;
		text-align: center;
		border-left: 2rpx solid #00b855;
	}

	.lablenofocus {
		font-size: 30rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #666666;
		text-align: center;
		padding-left: 10rpx;
	}

	.itemnofocus {
		background-color: #fff;
		padding: 25rpx 0 25rpx 20rpx;
	}

	.rightscroll {
		width: calc(100vw - 200rpx);
		background-color: #fafafa;
		height: 500rpx;
		box-sizing: border-box;
	}

	.itemlable {
		padding: 15rpx 35rpx;
		border-radius: 10rpx;
	}

	.focusbgc {
		background-color: rgba(0, 184, 85, .1);
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #00b855;
	}

	.nofocusbgc {
		background-color: #EFEFEF;
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #333333;
	}
</style>